<template>
  <div class='content'>
    <div class='progress'>
      <img src='~assets/img/icon_jd_1@2x.png' alt=''>
    </div>
    <div class='login-info'>
      <div class='welfare-list'>
        <div class='item-wrap'>
          <ul class='flex-box' style='border: none;'>
            <li><img src='~assets/img/recommond/icon_2.png' alt='' class='list-icon'><span>姓名:</span></li>
            <li><input type='text' maxlength="30" v-model='mobile' placeholder='请输入姓名'></li>
            <li><img class='more-icon' @click='empty()' v-if='isShow' src='~assets/img/icon_de@2x.png' alt=''></li>
          </ul>
          <ul class='flex-box'>
            <li><img src='~assets/img/recommond/icon_level.png' alt='' class='list-icon'><span>等级：</span></li>
            <li>
              <select v-model='level' name='' id=''>
                <option value='1'>银卡</option>
                <option value='2'>金卡</option>
                <option value='3'>钻石</option>
                <option value='4'>VIP</option>
              </select>
            </li>
            <li><img class='more-icon' style="margin-right:6px" src="~assets/img/icon_bot.png" alt=""></li>
          </ul>
          <ul class='flex-box'>
            <li><img src='~assets/img/recommond/icon_1.png' alt='' class='list-icon'><span>推荐人：</span></li>
            <li>{{ivint}}</li>
            <li><img class='more-icon'  @click='empty1()' v-if='isIvint' src='~assets/img/icon_de@2x.png' alt=''></li>
          </ul>
        </div>
      </div>
    </div>
      <div class='tc'><button ref="btn" @click='payment()' class='common-btn'>下一步</button></div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      money: 8888,
      mobile: '',
      isShow: false,
      isIvint: false,
      ivint: '',
      level: '1',
      reg: /[\u4e00-\u9fa5]/
    }
  },
  mounted () {
    this.$apiPost('userinfo',{}).then((data) => {
      if (data.status === 0) {
        this.ivint = data.data.account_info.p_uid
      } else {
        console.log(data.msg)
      }
    })
    this.$apiPost('userstatus',{}).then((data) => {
      if (data.status === 0) {
         if (data.data.recode === 1005) {
            this.$router.push('/user')
          }
      } else {
        console.log(data.msg)
      }
    })
  },
  methods: {
    // 立即支付
    payment () {
      if (this.isShow === true && this.reg.test(this.mobile) ===true) {
        if (this.level > 0) {
          if (this.isShow === true) {
            this.$apiPost('register',
              {'name': this.mobile, 'level': this.level}).then((data) => {
              if (data.status === 10001) {
                MessageBox({
                  title: '提示',
                  message: '输入信息有误，请重新输入'
                })
              } else {
                this.$router.push('./payment')
              }
            })
          } else {
            MessageBox({
              title: '提示',
              message: '请输入推荐人邀请码'
            })
          }
        } else {
          MessageBox({
            title: '提示',
            message: '请选择用户等级'
          })
        }
      } else {
        MessageBox({
          title: '提示',
          message: '请输入正确格式的用户姓名'
        })
      }
    },
    empty () {
      this.mobile = ''
    },
    empty1 () {
      this.ivint = ''
    }
  },
  watch: {
    mobile (newM, oldM) {
      if (newM.length > 0) {
        this.isShow = true
        this.$refs.btn.style.opacity = '1'
      } else {
        this.isShow = false
        this.$refs.btn.style.opacity = '0.5'
      }
    },
    ivint (newM, oldM) {
      if (newM.length > 0) {
        this.isIvint = true
      } else {
        this.isIvint = false
      }
    }
  },
  updated () {
  }
}
</script>
<style scoped lang='scss'>
  @import '~lib/reset.scss';
  .login-info {
    padding: 0 16px;
    background-color: #fff;
  }
  .welfare-list {
    .item-wrap{
      clear: both;
      .flex-box {
        padding: 0;
        .list-icon {
          width: 24px;
          margin-right: 10px;
        }
        li {
          height: 100%;
          select {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            background: transparent;
          }
        }
      }
      .item {
        padding: 22px 0 8px 0;
        img {
          width: 24px;
          height: 24px;
          margin-right: 14px;
        }
        span {
          font-size: $font-15;
          letter-spacing: 2px;
        }
      }
    }
    .item:not(:last-child) {
      border-bottom: 1px solid #e5e5e5;
    }
  }
</style>
